<template>
    <div class="cms-content-detail-edit">
        <div style="width: 1400px;">
            <el-form :model="contentFormData" label-width="100px" class="content-detail-form" label-suffix=":">
                <el-form-item label="所属栏目">
                    <el-tree-select v-model="contentFormData.columnId" :data="columnOptions" :check-strictly="true"
                        :render-after-expand="false" placeholder="选择上级栏目" clearable />
                </el-form-item>
                <el-form-item label="标题">
                    <el-input v-model="contentFormData.title"></el-input>
                </el-form-item>
                <el-form-item label="内容">
                    <KkTextEditor v-if="contentFormData.contentType === 'HTML'" v-model="contentFormData.content"
                        style="width: 100%;" />
                    <KkMdEditor v-else v-model="contentFormData.content" />
                </el-form-item>
                <el-form-item label="置顶状态">
                    <el-switch v-model="contentFormData.topFlag" active-text="置顶" inactive-text="未置顶" />
                </el-form-item>
            </el-form>
            <div class="button-group">
                <el-button type="primary" @click="submit">提交</el-button>
                <el-button @click="cancel">关闭</el-button>
            </div>
        </div>
    </div>
</template>
<script setup lang="js">
import { ref, onMounted, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import cmsContentApi from '@/api/cmsContentApi';
import cmsColumnApi from '@/api/cmsColumnApi';
import KkTextEditor from '@/components/KkTextEditor.vue';
import KkMdEditor from '@/components/KkMdEditor.vue';
import { ElMessage } from 'element-plus';

const props = defineProps({
    id: {
        type: Number,
        required: true
    }
})
const router = useRouter();
const route = useRoute();
const columnOptions = ref([]);

const fetchColumnOptions = async () => {
    const response = await cmsColumnApi.listTree();
    const columnList = response.data;
    columnOptions.value = columnList.map(column => ({
        id: column.id,
        label: column.name,
        value: column.id,
        children: column.children ? column.children.map(child => ({
            id: child.id,
            label: child.name,
            value: child.id
        })) : []
    }));
}

const contentFormData = ref({
    title: '',
    content: '',
    columnId: 1,
    contentType: 'HTML',
    topFlag: false,
    status: 'DRAFT'
});

const getContent = async () => {
    const res = await cmsContentApi.get(props.id);
    contentFormData.value = res.data;
}

const submit = () => {
    if (props.id > 0) {
        cmsContentApi.update(contentFormData.value).then((data) => {
            ElMessage.success('更新成功');
            const id = data.data.id;
            router.replace({ name: 'CmsContentDetailEdit', params: { id } });
            getContent().then();
        });
    } else {
        cmsContentApi.create(contentFormData.value).then((data) => {
            ElMessage.success('创建成功');
            getContent().then();
        });
    }
}

const cancel = () => {
}

onMounted(() => {
    fetchColumnOptions().then();
    if (props.id > 0) {
        // 获取内容
        getContent().then();
    } else {
        // 新增内容，设置默认栏目
        const columnId = route.query.columnId;
        if (columnId) {
            contentFormData.value.columnId = parseInt(columnId);
        }
    }
})

</script>
<style lang="scss" scoped>
.cms-content-detail-edit {
    height: 100%;
    display: flex;

    .content-detail-form {
        height: calc(100% - 60px);
        overflow-y: auto;
    }

    .button-group {
        height: 30px;
        width: 100%;
        margin-top: 10px;
        text-align: center;
    }
}
</style>